<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>谢耀祖 & 孙玉霞 婚礼请柬</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f4;
        }

        .container {
            max-width: 1024px;
            margin: 0 auto;
            background: white;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            overflow: hidden;
        }

        .hero-section {
            position: relative;
            height: 384px;
            overflow: hidden;
        }

        .hero-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
        }

        .hero-content {
            position: absolute;
            bottom: 32px;
            left: 32px;
            color: white;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
        }

        .hero-title {
            font-size: 2.25rem;
            font-weight: 300;
            margin-bottom: 8px;
            text-wrap: balance;
        }

        .hero-subtitle {
            font-size: 1.125rem;
            font-weight: 300;
            opacity: 0.9;
        }

        .hero-details {
            margin-top: 16px;
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .date-badge {
            font-size: 0.875rem;
            background: rgba(0, 0, 0, 0.6);
            padding: 4px 12px;
            border-radius: 9999px;
        }

        .venue {
            font-size: 0.875rem;
        }

        .main-grid {
            display: grid;
            grid-template-columns: 7fr 5fr;
        }

        .text-content {
            padding: 48px;
            background: #fafaf9;
        }

        .text-content-inner {
            max-width: 448px;
        }

        .double-happiness {
            font-size: 4rem;
            color: #dc2626;
            font-weight: bold;
            margin-bottom: 32px;
        }

        .content-section {
            margin-bottom: 24px;
            color: #57534e;
            line-height: 1.625;
        }

        .section-title {
            font-size: 1.25rem;
            font-weight: 300;
            color: #1c1917;
            margin-bottom: 12px;
        }

        .quote-section {
            border-left: 2px solid #fecaca;
            padding-left: 24px;
            font-style: italic;
            color: #78716c;
        }

        .photo-section {
            position: relative;
            height: 384px;
        }

        .photo-section img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .photo-gallery {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 4px;
        }

        .gallery-item {
            position: relative;
            height: 256px;
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .story-grid {
            display: grid;
            grid-template-columns: 5fr 7fr;
        }

        .story-photo {
            position: relative;
            height: 320px;
        }

        .story-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .story-content {
            padding: 48px;
            background: white;
            display: flex;
            align-items: center;
        }

        .story-inner {
            max-width: 448px;
        }

        .story-title {
            font-size: 1.5rem;
            font-weight: 300;
            color: #1c1917;
            margin-bottom: 24px;
        }

        .story-date {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 24px;
        }

        .date-label {
            font-size: 0.875rem;
            color: #dc2626;
            font-weight: 500;
        }

        .date-value {
            font-size: 0.875rem;
            color: #78716c;
        }

        .feature-photo {
            position: relative;
            height: 384px;
            overflow: hidden;
        }

        .feature-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .feature-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.6);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .feature-text {
            text-align: center;
            color: white;
            max-width: 512px;
            padding: 0 32px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
        }

        .feature-quote {
            font-size: 1.25rem;
            font-weight: 300;
            line-height: 1.625;
            margin-top: 15rem;
            margin-left: 14rem;
            text-wrap: balance;
        }

        .wedding-details {
            background: #1c1917;
            color: white;
            padding: 48px;
        }

        .details-grid {
            max-width: 1024px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 48px;
        }

        .details-title {
            font-size: 1.5rem;
            font-weight: 300;
            margin-bottom: 32px;
        }

        .details-list {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .detail-item {
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #57534e;
            padding-bottom: 8px;
        }

        .detail-label {
            color: #a8a29e;
        }

        .closing-message {
            display: flex;
            align-items: center;
        }

        .closing-text {
            font-size: 1.125rem;
            font-weight: 300;
            line-height: 1.625;
            text-wrap: balance;
        }

        .closing-highlight {
            color: #f87171;
            font-weight: 500;
            margin-top: 24px;
        }

        @media (max-width: 768px) {
            .main-grid,
            .story-grid,
            .details-grid {
                grid-template-columns: 1fr;
            }
            
            .hero-title {
                font-size: 1.875rem;
            }
            
            .text-content,
            .story-content,
            .wedding-details {
                padding: 24px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Hero Section -->
        <div class="hero-section">
            <img src="./img/57ddc0ce51f5c8ca75186e631422ad1.jpg" alt="Couple under fireworks" class="hero-image">
            <div class="hero-overlay"></div>
            <div class="hero-content">
                <h1 class="hero-title">谢耀祖 & 孙玉霞</h1>
                <p class="hero-subtitle">所爱隔山海，山海皆可平</p>
                <div class="hero-details">
                    <span class="date-badge">2025.10.02</span>
                    <span class="venue">甘谷县诚益饭庄</span>
                </div>
            </div>
        </div>

        <!-- Main Content Grid -->
        <div class="main-grid">
            <!-- Left Column - Text Content -->
            <div class="text-content">
                <div class="text-content-inner">
                    <div class="double-happiness">囍</div>

                    <div class="content-section">
                        <h3 class="section-title">各位挚友亲朋：</h3>
                        <p>冬日来信，请你来赴一场以爱之名的邀约。</p>
                    </div>

                    <div class="quote-section">
                        <p>"爱不是占有，而是责任；不是轰轰烈烈的誓言，而是平淡中的陪伴。"</p>
                    </div>

                    <div class="content-section">
                        <p>真正的浪漫不在言语，而在行动；不在索取，而在责任；不在轰轰烈烈，而在细水长流。</p>
                        <p>爱不是一见钟情的冲动，而是日复一日的经营。浪漫不是烛光晚餐，而是"我愿意为你浪费时间"。</p>
                    </div>
                </div>
            </div>

            <!-- Right Column - Photo -->
            <div class="photo-section">
                <img src="./img/0f6bb95a693f02204f75b5caec736e7.jpg" alt="Bride in red traditional dress">
            </div>
        </div>

        <!-- Photo Gallery Section -->
        <div class="photo-gallery">
            <div class="gallery-item">
                <img src="./img/10f1a5ecd62fe856699aac5038b70d2.jpg" alt="Bride with double happiness symbols">
            </div>
            <div class="gallery-item">
                <img src="./img/19fb04398d4b970f326a07b4f9053aa.jpg" alt="Couple with marriage certificates">
            </div>
            <div class="gallery-item">
                <img src="./img/228c48ef1e6172859fc3de8a76a7a21.jpg" alt="Couple celebrating">
            </div>
        </div>

        <!-- Story Section -->
        <div class="story-grid">
            <!-- Photo -->
            <div class="story-photo">
                <img src="./img/3702b9b6ca7894a68892f8e7a4662de.jpg" alt="Couple at sunset">
            </div>

            <!-- Text -->
            <div class="story-content">
                <div class="story-inner">
                    <h3 class="story-title">我们的故事</h3>
                    <div class="story-date">
                        <span class="date-label">相识</span>
                        <span class="date-value">2018年12月4日</span>
                    </div>

                    <div class="content-section">
                        <p>浪漫不是999朵玫瑰，而是每天浇水的坚持；不是惊天动地的誓言，而是平凡日子里的相守。</p>
                        <p>你选择了我，我选择了你，从此我们成为彼此生命中不可替代的存在。</p>
                        <p>爱不是外貌、财富、地位这些肉眼可见的东西，而是理解、信任、陪伴这些需要用心感受的联结。</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Large Feature Photo -->
        <div class="feature-photo">
            <img src="./img/47e3573771462bc3dd628233fdf43f0.jpg" alt="Couple with sparklers at dusk">
            <div class="feature-overlay">
                <div class="feature-text">
                    <p class="feature-quote">
                        而人生之所以值得，是因为有那些看不见却真实存在的爱。浪漫不在即时满足，而在期待的过程；不在结果，而在奔赴的过程。
                    </p>
                </div>
            </div>
        </div>

        <!-- Wedding Details -->
        <div class="wedding-details">
            <div class="details-grid">
                <div>
                    <h3 class="details-title">Wedding Details</h3>
                    <div class="details-list">
                        <div class="detail-item">
                            <span class="detail-label">日期</span>
                            <span>2025年10月2日</span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">地点</span>
                            <span>甘谷县诚益饭庄</span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">新郎</span>
                            <span>谢耀祖</span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">新娘</span>
                            <span>孙玉霞</span>
                        </div>
                    </div>
                </div>

                <div class="closing-message">
                    <div>
                        <p class="closing-text">
                            就像小王子对他的玫瑰，我们也因时间与爱浇灌彼此。让这一天成为最特别的时刻，这不仅仅是一场婚礼，更是我们的承诺。
                        </p>
                        <p class="closing-highlight">期待您与我们共同见证珍藏这份意义非凡的回忆</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
